<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:setLocale value="ja-JP" />

<!DOCTYPE html >
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IT ペンギン</title>
<style>
	body {
		margin:0;
		background-color: black;
		color:white;
		line-height: 1.2em;
		font-size: 90%;
	}
	
    div.cont {
		padding:2px;
		border:solid 3px black;
		overflow: hidden;
		cursor: pointer;
	}
	
	div.cont p {
		padding:0.5em;
		margin:0;
	}
	
	div.inner {
		border-radius: 10px;
		position: relative;
		margin-top: 1em;
		clear: both;
	}
	
	div.inner ul{
		list-style-type: none;
		margin:0.5em 0;
	}
	
	div.inner > span{
		position: absolute;
		top:-0.7em;
		left:1em;
	}
	
	div.portal {
		color:white;
		cursor: auto;
		position: relative;
	}
	
	.travel {
		background-color:#E8BD3C;
		color:black;
	}
	.travel div.inner {
		border:dotted 3px black;
	}
	.travel div.inner a {
		color: black;
	}
	.travel div.inner > span{
		background-color:#E8BD3C;
	}
	
	.review {
		background-color:#482CE8;
	}
	.review div.inner {
		border:dotted 3px white;
	}
	.review div.inner a {
		color: white;
	}
	.review div.inner > span{
		background-color:#482CE8;
	}
	
	.review img, .travel img {
		margin-bottom:1em;
	}
	
	.alpen {
		background-color:#2074E8;
	}
	.election {
		background-color:#E87A35;
	}
	
	footer {
		text-align: center;
	}
	
	footer a , .description a{
		color:white;
	}
	
	<c:if test="${!isMobile}">
	div.outer {
		display:table;
		width:100%;
	}
	div.row {
		display:table-row;
		width:100%;
	}
	div.row div.cont {
		width:50%;
		display:table-cell;
	}
	img.banner {
		float:left;
		padding-right:0.5em;
	}
	
	div.portal {
		padding:1em 2em 2px;
	}
	
	div.portal div.description {
		float:right;
	}
	div.portal div.title {
		float:left;
	}
	body {
		padding:1em 3px 3px;
	}
	</c:if>
	<c:if test="${isMobile}">
	img.banner {
		display:block;
		margin-left: auto;
		margin-right: auto;
	}
	div.portal {
		padding:1em 2px;
	}
	div.portal div.description {
		padding-top:0.5em;
	}
	div.inner ul{
		padding-left:1em;
	}
	</c:if>
</style>
<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript">
$(function() {
	makeLink('travel');
	makeLink('review');
	makeLink('alpen');
	makeLink('election');
});

function makeLink(className) {
	$("." + className).click(function (event) {
		location.href="http://" + className + ".it-penguin.com";
	});
}
</script>

<c:if test="${isMobile}">
<meta name="viewport" content="initial-scale=1.0">
</c:if>

<meta name="Keywords" content="旅, 国道, レビュー, DVVD, 映画, 本, コミック, 国政選挙" />
<meta name="description" content="ヒロ†が運営するサイトのポータルです。旅日記、映画、本のレビューなどにリンクします。" />

</head>
<body>
<div class="outer" >
	<div class="row">
		<div class="cont travel">
			<img class="banner" src="https://lh5.googleusercontent.com/-9PFBpki_OaQ/T5uCxzliTQI/AAAAAAAAEjk/uDrNwW9Ifz0/s800/travel.png" alt="旅ペンギン" width=300px height="80px"/>
			<p>ヒロ†の旅日記<br/>
			２桁国道全制覇の旅、青春１８きっぷ５枚使いきりの旅などなど掲載中</p>
			<div class="inner">
				<span>What's new!</span>
				<ul id="travelList">
				<c:forEach var="article" items="${travelArticles}" >
					<li>
						<fmt:formatDate value="${article.published}" pattern="yyyy/MM/dd" timeZone="JST"/>
						<a href="${article.link}">${article.title}</a>
					</li>
				</c:forEach>
				</ul>
			</div>
		</div>
		<div class="cont review">
			<img class="banner" src="http://3.bp.blogspot.com/-Uw48yJa78bc/Ua3z4XLExpI/AAAAAAAAH3U/JJk4BXbjfCM/s320/banner.png" width=300px height="80px" alt="レビュー・ペンギン"/>
			<p>映画、本、音楽、ゲームのレビュー集。<br/>
			100点満点で勝手に点数をつけています。</p>
			<div class="inner">
				<span>What's new!</span>
				<ul id="reviewList">
				<c:forEach var="article" items="${reviewArticles}" >
					<li>
						<fmt:formatDate value="${article.published}" pattern="yyyy/MM/dd" timeZone="JST"/>
						<a href="${article.link}">${article.title}</a>
					</li>
				</c:forEach>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="cont portal" >
<div class="title">
<span style="font-size:30pt;">IT Penguin</span>
<div style="padding-left:2em;"><b>IT</b>'s a <b>P</b>rofessional <b>ENG</b>ineer's <b>U</b>nstable <b>IN</b>side.<br/>
- あるいは、あるITエンジニアの内憂</div>
</div>
<div class="description">名古屋に漂うデブリ・ヒロ†がお送りする<br/>取るに足らないサイト集<br/><a href="https://twitter.com/hiroatsu">@hiroatsu (Twitter)</a></div>
</div>
<div class="outer">
	<div class="row">
		<div class="cont alpen" >
			<img class="banner" src="https://lh3.googleusercontent.com/-qVR1sBxSDB0/T5uCZshRhBI/AAAAAAAAEjM/ZNcVGNmjyu4/s800/alpen.png" alt="世界アルペン遺産"/>
			<p>日本中に点在する三角屋根の建物。<br/>
			それは、アルペン文明の遺跡だった。</p>
		</div>
		<div class="cont election" >
			<img class="banner" src="https://lh3.googleusercontent.com/--Q7xLkHow8o/T55nTRovE4I/AAAAAAAAEkU/a5cOV5C000A/s800/banner.png" height="80" width="300" alt="国政選挙 議席予想・速報 まとめ"/>
			<p>
			衆議院選挙、参議院選挙の各テレビ局の議席予想、<br/>
			選挙速報での当確議席数の推移をまとめています。</p>
		</div>
	</div>
</div>
<footer>
<script type="text/javascript">
     function mt(mtDom1, mtAcc1, mtDom2, mtAcc2, mtDom3) {
           var m = "mai";
           var l = "lto:";
           var a = "@";
           return m + l + mtAcc1 + mtAcc2 + a + mtDom1 + mtDom2 + mtDom3;
     }
</script>
<%
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy");
%>
Copyright 2004 - <%= sdf.format(new Date()) %> hiro† All right reserved. お問い合わせは、<a href="javascript:void(location.href=mt('it-pen', 'in', 'guin.c', 'fo', 'om'))">こちら</a> まで
</footer>
</body>
</html>